@strapi/admin 4.1.4-alpha.0 → 4.2.0-alpha.1

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -13,7 +13,6 @@ import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
 import Providers from './components/Providers';
-import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
 import {
   INJECT_COLUMN_IN_TABLE,
@@ -34,7 +33,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      theme: lightTheme,
+      themes: { light: lightTheme, dark: darkTheme },
       translations: {},
       tutorials: true,
     };
@@ -226,7 +225,7 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      this.configurations.theme = merge(this.configurations.theme, this.customConfigurations.theme);
+      merge(this.configurations.themes.light, this.customConfigurations.theme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {
@@ -427,44 +426,43 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <Theme theme={this.configurations.theme}>
-        <Providers
-          authLogo={this.configurations.authLogo}
-          components={components}
-          fields={fields}
-          localeNames={localeNames}
-          getAdminInjectedComponents={this.getAdminInjectedComponents}
-          getPlugin={this.getPlugin}
-          messages={this.configurations.translations}
-          menu={this.menu}
-          menuLogo={this.configurations.menuLogo}
-          plugins={this.plugins}
-          runHookParallel={this.runHookParallel}
-          runHookWaterfall={(name, initialValue, async = false) => {
-            return this.runHookWaterfall(name, initialValue, async, store);
-          }}
-          runHookSeries={this.runHookSeries}
-          settings={this.settings}
-          showTutorials={this.configurations.tutorials}
-          showReleaseNotification={this.configurations.notifications.releases}
-          store={store}
-        >
-          <>
-            <Helmet
-              link={[
-                {
-                  rel: 'icon',
-                  type: 'image/png',
-                  href: this.configurations.head.favicon,
-                },
-              ]}
-            />
-            <BrowserRouter basename={basename}>
-              <App store={store} />
-            </BrowserRouter>
-          </>
-        </Providers>
-      </Theme>
+      <Providers
+        authLogo={this.configurations.authLogo}
+        components={components}
+        fields={fields}
+        localeNames={localeNames}
+        getAdminInjectedComponents={this.getAdminInjectedComponents}
+        getPlugin={this.getPlugin}
+        messages={this.configurations.translations}
+        menu={this.menu}
+        menuLogo={this.configurations.menuLogo}
+        plugins={this.plugins}
+        runHookParallel={this.runHookParallel}
+        runHookWaterfall={(name, initialValue, async = false) => {
+          return this.runHookWaterfall(name, initialValue, async, store);
+        }}
+        runHookSeries={this.runHookSeries}
+        themes={this.configurations.themes}
+        settings={this.settings}
+        showTutorials={this.configurations.tutorials}
+        showReleaseNotification={this.configurations.notifications.releases}
+        store={store}
+      >
+        <>
+          <Helmet
+            link={[
+              {
+                rel: 'icon',
+                type: 'image/png',
+                href: this.configurations.head.favicon,
+              },
+            ]}
+          />
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </>
+      </Providers>
     );
   }
 }

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -17,7 +17,7 @@ const ModalWrapper = styled(Flex)`
   z-index: 4;
   inset: 0;
   /* this is theme.colors.neutral800 with opacity */
-  background: ${({ theme }) => `${theme.colors.neutral800}33`};
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
 `;
 
 const Modal = ({ onClose, onSkip, children, hideSkip }) => {

package/admin/src/components/Providers/index.js

@@ -9,6 +9,8 @@ import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
 import Notifications from '../Notifications';
 import OverlayBlocker from '../OverlayBlocker';
+import ThemeToggleProvider from '../ThemeToggleProvider';
+import Theme from '../Theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,41 +38,45 @@ const Providers = ({
   settings,
   showReleaseNotification,
   showTutorials,
-
   store,
+  themes,
 }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store}>
-        <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-          <ConfigurationsContext.Provider
-            value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
-          >
-            <StrapiAppProvider
-              getPlugin={getPlugin}
-              menu={menu}
-              plugins={plugins}
-              runHookParallel={runHookParallel}
-              runHookWaterfall={runHookWaterfall}
-              runHookSeries={runHookSeries}
-              settings={settings}
-            >
-              <LibraryProvider components={components} fields={fields}>
-                <LanguageProvider messages={messages} localeNames={localeNames}>
-                  <AutoReloadOverlayBlockerProvider>
-                    <OverlayBlocker>
-                      <GuidedTour>
-                        <Notifications>{children}</Notifications>
-                      </GuidedTour>
-                    </OverlayBlocker>
-                  </AutoReloadOverlayBlockerProvider>
-                </LanguageProvider>
-              </LibraryProvider>
-            </StrapiAppProvider>
-          </ConfigurationsContext.Provider>
-        </AdminContext.Provider>
-      </Provider>
-    </QueryClientProvider>
+    <ThemeToggleProvider themes={themes}>
+      <Theme>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store}>
+            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+              <ConfigurationsContext.Provider
+                value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
+              >
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
+                >
+                  <LibraryProvider components={components} fields={fields}>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </ConfigurationsContext.Provider>
+            </AdminContext.Provider>
+          </Provider>
+        </QueryClientProvider>
+      </Theme>
+    </ThemeToggleProvider>
   );
 };
 
@@ -104,6 +110,33 @@ Providers.propTypes = {
   showReleaseNotification: PropTypes.bool.isRequired,
   showTutorials: PropTypes.bool.isRequired,
   store: PropTypes.object.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
 };
 
 export default Providers;

package/admin/src/components/Theme/index.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
 import PropTypes from 'prop-types';
-import { lightTheme } from '@strapi/design-system/themes';
+import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
-const Theme = ({ children, theme }) => (
-  <ThemeProvider theme={theme}>
-    {children}
-    <GlobalStyle />
-  </ThemeProvider>
-);
+const Theme = ({ children }) => {
+  const { currentTheme, themes } = useThemeToggle();
 
-Theme.propTypes = {
-  children: PropTypes.element.isRequired,
-  theme: PropTypes.object,
+  return (
+    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+      {children}
+      <GlobalStyle />
+    </ThemeProvider>
+  );
 };
 
-Theme.defaultProps = {
-  theme: lightTheme,
+Theme.propTypes = {
+  children: PropTypes.element.isRequired,
 };
 
 export default Theme;

package/admin/src/components/ThemeToggleProvider/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * ThemeToggleProvider
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeToggleContext } from '../../contexts';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY);
+
+  return persistedTheme || browserTheme;
+};
+
+const ThemeToggleProvider = ({ children, themes }) => {
+  const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
+
+  const handleChangeTheme = nextTheme => {
+    setCurrentTheme(nextTheme);
+    localStorage.setItem(THEME_KEY, nextTheme);
+  };
+
+  return (
+    <ThemeToggleContext.Provider value={{ currentTheme, onChangeTheme: handleChangeTheme, themes }}>
+      {children}
+    </ThemeToggleContext.Provider>
+  );
+};
+
+ThemeToggleProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
+};
+
+export default ThemeToggleProvider;

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -49,6 +49,8 @@ const getSelectStyles = theme => {
         ...base,
         width: '100%',
         marginTop: theme.spaces[1],
+        backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -76,7 +78,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -29,7 +29,8 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   /* GUTTER */
@@ -158,7 +159,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: white;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   .CodeMirror-scroll {
@@ -292,6 +293,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
   }
   .CodeMirror-measure pre {
     position: static;

package/admin/src/contexts/ThemeToggle/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeToggleContext = createContext({});
+
+export default ThemeToggleContext;

package/admin/src/contexts/index.js

@@ -1,3 +1,4 @@
 export { default as AdminContext } from './Admin';
 export { default as ConfigurationsContext } from './Configurations';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
+export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/hooks/index.js

@@ -1,6 +1,7 @@
 export { default as useConfigurations } from './useConfigurations';
 export { default as useModels } from './useModels';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
+export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFromMarketPlace';
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';
 export { default as useRolesList } from './useRolesList';
@@ -8,3 +9,4 @@ export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
+export { default as useThemeToggle } from './useThemeToggle';

package/admin/src/hooks/useFetchPluginsFromMarketPlace/index.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useIntl } from 'react-intl';
+
+const useFetchPluginsFromMarketPlace = () => {
+  const { locale: currentLocale } = useIntl();
+  const [state, setState] = useState({
+    error: false,
+    isLoading: true,
+    data: null,
+  });
+
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
+
+    const getData = async () => {
+      try {
+        const { data } = await axios.get('https://marketplace.strapi.io/plugins', {
+          cancelToken: source.token,
+          params: { lang: currentLocale },
+        });
+
+        setState({
+          isLoading: false,
+          data,
+          error: false,
+        });
+      } catch (err) {
+        if (axios.isCancel(err)) {
+          // Silent
+        } else {
+          // handle error
+          setState(prev => ({ ...prev, isLoading: false, error: true }));
+        }
+      }
+    };
+
+    getData();
+
+    return () => {
+      source.cancel();
+    };
+  }, [currentLocale]);
+
+  return state;
+};
+
+export default useFetchPluginsFromMarketPlace;

package/admin/src/hooks/useThemeToggle/index.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeToggleContext } from '../../contexts';
+
+const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};
+
+export default useThemeToggle;

package/admin/src/pages/Admin/Onboarding/index.js

@@ -21,7 +21,7 @@ const Button = styled.button`
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
   svg {
-    color: ${({ theme }) => theme.colors.neutral0};
+    color: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 

package/admin/src/pages/HomePage/SocialLinks.js

@@ -30,9 +30,6 @@ const StyledReddit = styled(Reddit)`
   > path:first-child {
     fill: #ff4500;
   }
-  > path:last-child {
-    fill: ${({ theme }) => theme.colors.neutral0};
-  }
 `;
 const StyledStrapi = styled(Strapi)`
   > path:first-child {

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -1,24 +1,26 @@
 import React from 'react';
+import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
-import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import { fetchPlugins } from './utils/api';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
-  const { notifyStatus } = useNotifyAT();
   useFocusWhenNavigate();
+  const { notifyStatus } = useNotifyAT();
+  const toggleNotification = useNotification();
 
   const title = formatMessage({
     id: 'app.components.ListPluginsPage.title',
     defaultMessage: 'Plugins',
   });
 
-  const notifyPluginPageLoad = () => {
+  const notifyLoad = () => {
     notifyStatus(
       formatMessage(
         {
@@ -30,7 +32,14 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
+  const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
 
   const isLoading = status !== 'success' && status !== 'error';
 

package/admin/src/{hooks/useFetchInstalledPlugins → pages/InstalledPluginsPage}/utils/api.js

@@ -1,9 +1,11 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchInstalledPlugins = async () => {
+const fetchPlugins = async notify => {
   const { data } = await axiosInstance.get('/admin/plugins');
 
+  notify();
+
   return data;
 };
 
-export { fetchInstalledPlugins };
+export { fetchPlugins };

package/admin/src/pages/MarketplacePage/MarketplaceBanner/Wrapper.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+// TODO : To migrate with @strapi/design-system
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 2rem;
+  border-radius: 4px;
+  border-left: 4px solid ${({ theme }) => theme.main.colors.mediumBlue};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
+  padding: 8px 16px;
+
+  .bannerImage {
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+  }
+
+  .bannerLink {
+    color: ${({ theme }) => theme.main.colors.mediumBlue};
+    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+    svg {
+      margin-left: 4px;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/pages/MarketplacePage/MarketplaceBanner/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useTracking } from '@strapi/helper-plugin';
+import Wrapper from './Wrapper';
+import LogoStrapi from '../../../assets/images/banner_strapi-rocket.png';
+
+const MarketplaceBanner = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <Wrapper>
+      <img
+        className="bannerImage"
+        src={LogoStrapi}
+        alt={formatMessage({ id: 'app.components.MarketplaceBanner.image.alt' })}
+      />
+      <div>
+        <div>
+          <FormattedMessage id="app.components.MarketplaceBanner" />
+        </div>
+        <a
+          href="https://github.com/strapi/awesome-strapi"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bannerLink"
+          onClick={() => trackUsage('didGoToStrapiAwesome')}
+        >
+          <FormattedMessage id="app.components.MarketplaceBanner.link" />
+          <i className="fa fa-external-link-alt" />
+        </a>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default MarketplaceBanner;